<template>
	<view class="column-list">
		<view class="main-title">{{title}}</view>
		<view class="main-content" >
			
			<view class="news-main" id="news-main" data-src="news-main">
				<view class="news-content">
					<view class="news-item" v-for="(item,index) in newsList" @tap="goPage('columnContent?id='+item.id)">
						<span class="name">{{item.title}}</span>
						<span class="time iconfont iconrili" :class="item.icon">{{item.createDate}}</span>
					</view>
					<nodata v-show="start && newsList.length==0"></nodata>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata.vue'
	export default {
		components: {nodata},
		data() {
			return {
				list:[
					{bg:'#62d4a6',icon:'iconjidi1',title:'建设专题'},
					{bg:'#9376f5',icon:'iconfupin1',title:'扶贫专题'},
					{bg:'#62ccd4',icon:'iconfangyijiaoyu',title:'防疫专题'},
				],
				newsList:[
				
				],
				pageNo:1,
				start:false,
				pageSize:20,
				title:'',
			}
		},
		onLoad(obj) {
			this.title = obj.title;
			this.getData(obj.type)
		},
		methods: {
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			getData(type){
	            let that = this;
	            this.loading = true;
	            this.$http.get("/f/pageNotice?pageNo="+this.pageNo+"&pageSize=20&classifyId="+type)
	            .then(function (response) {
	                let list = response.data;
	                that.newsList = list;
	                // if(list.length!=0){

	                //     list.forEach((item,i)=>{
	                //         that.newList.push(item)
	                //     })
	                // } 
	                that.start = true;   
	                  
	            })
	            .catch(function (error) {
	                  // handle error
	                  console.log(error);
	            })
	        },
			back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			search(){

			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				console.log(222)
			},
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active"
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.column-list{
		width:100%;
		height:100%;
		background:#f4f4f4;
		overflow-y:auto;
		.main-title{
			width:100%;
			box-sizing:border-box;
			padding:0 40rpx;
			line-height:40rpx;
			font-size:34rpx;
			color:#444444;
			text-align:center;
			margin-top:40rpx;
			margin-bottom:10rpx;
		}
		.main-content{
			box-sizing:border-box;
			padding-left:40rpx;
		}
		.news-main{
			width:100%;
			.news-content{
				width:100%;
				box-sizing:border-box;
				padding-left:0rpx;
				.news-item{
					width:100%;
					border-bottom: 1px #d0d0d0 dashed;
					padding-bottom:20rpx;
					padding-top:20rpx;
					.name{
						width:95%;
						display:block;
						line-height:40rpx;
						font-size:30rpx;
						color:#555555;
						
					}
					.time{
						width:100%;
						display:block;
						line-height:40rpx;
						font-size:28rpx;
						color:#999999;
						overflow:hidden;
						margin-top:10rpx;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
					.time:before{
						color:#1783dd;
						font-size:40rpx;
						margin-right:10rpx;
						position:relative;
						top:4rpx;
					}
					.iconzuozhe:before{
						font-size:36rpx;
					}
				}
				.news-item:last-child{
					border:0;
				}
			}
			.news-top{
				width:100%;
				height:70rpx;
				background:#fbdcdc;
				box-sizing:border-box;
				padding:0 40rpx;
				line-height:70rpx;
				font-size:30rpx;
				color:#d01515;
			}
			.news-top:before{
				margin-right:16rpx;
				font-size:34rpx;
			}
		}
	}
</style>
